<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>layout 管理系统大布局 - Layui</title>
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css">
    <link rel="stylesheet" href="/lib/public.css" media="all">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">后台管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;" >
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                    <span id="userinfo" ></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:void(0);" id="adminUpdate">修改信息</a></dd>
                    <dd><a href="javascript:void(0);" id="logout">退出登录</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">主页</a>
                    <dl class="layui-nav-child">
                        <dd><a href="/index.html" >主页</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">类别管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;"  data-url="/category/category.html">商品类别管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">商品管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;"  data-url="/goods/goods.html">商品列表管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;"  data-url="/user/user.html">用户管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">订单管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;"  data-url="/order/order.html">订单管理</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div  class="layui-body" id="main" >
        <div  id="main1" style="width: 800px;height:400px;"></div>
        <div  id="main2" style="width: 1200px;height:400px;"></div>
    </div>


    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

</div>
<script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js" ></script>
<script src="/lib/layui-v2.6.3/layui.js"></script>
<script src="/lib/echarts.js" ></script>
<script type="text/javascript">
  $(document).ready(function (e) {
      $.ajax({
        url:"/api/order/status",
        type:"GET",
          dataType:"JSON",
          success:function (resp) {
              var myChart1 = echarts.init(document.getElementById('main1'));

              // 指定图表的配置项和数据
              var option1 = {
                  title: {
                      text: '订单状态图'
                  },
                  tooltip: {},
                  legend: {
                      data: ['订单状态数']
                  },
                  xAxis: {
                      data: ['未支付', '已支付']
                  },
                  yAxis: {},
                  series: [
                      {
                          name: '订单数',
                          type: 'bar',
                          data: resp.data
                      }
                  ]
              };
              myChart1.setOption(option1);
          }
      })


      $.ajax({
          url:"/api/goods/count",
          type:"GET",
          dataType:"JSON",
          success:function (resp) {
              var myChart2 = echarts.init(document.getElementById('main2'));

              // 指定图表的配置项和数据
              var option2 = {
                  title: {
                      text: '库存不足50的商品'
                  },
                  tooltip: {},
                  legend: {
                      data: ['商品库存数']
                  },
                  xAxis: {
                      data: resp.data.goods
                  },
                  yAxis: {},
                  series: [
                      {
                          name: '订单数',
                          type: 'bar',
                          data: resp.data.count
                      }
                  ]
              };
              myChart2.setOption(option2);
          }
      })
  })


</script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });

        //加载右边页面
        $(".layui-nav-tree .layui-nav-item dl dd a").click(function (){
            let url = $(this).attr("data-url");
            $("#main").load(url);
        })

        $("#logout").click(function (){
            $.ajax({
                url:"/api/admin/logout",
                type: "GET",
                dataType: "JSON",
                success:function (resp) {
                    layer.msg(resp.msg,{time:500},function (){
                        window.location.href = "/login.html";
                    });
                }
            })
        })
        
        $("#adminUpdate").click(function () {
            layer.open({
                type:2,
                title:"修改分类信息",
                area:['800px','500px'],
                content:'/adminUpdate.html',
                end: function () {
                    table.reload("currentTableId")
                }
            })
        })

        $.ajax({
            url: "/api/admin/info",
            type: "GET",
            dataType:"JSON",
            success:function (resp) {

                $("#userinfo").text(resp.data.username);
            }
        })

    });

</script>
</body>
</html>